<template>
     <el-dialog
      :close-on-click-modal="false"
      :visible.sync="cabinetVisible"
      :before-close="handleClose"
      top="5vh"
    >
    <template slot="title">
        <div :style="titleColor">搜索</div>
      </template>
      <el-form :inline="true" class="demo-form-inline filter">
        <el-form-item label="储物柜编号">
          <el-input
            v-model="listQuerySearch.feuipmentid"
            clearable
            class="filter-item"
            placeholder="请输入储物柜编号"
          />
        </el-form-item>
        <el-form-item label="储物柜名称">
          <el-input
            v-model="listQuerySearch.fequipmenttag"
            clearable
            class="filter-item"
            placeholder="请输入储物柜名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            round
            size="medium"
            class="filter-item"
           :style="{background:buttonColor.lookup,color:buttonColor.color}"
            @click="searchFilter"
          >查找</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoadingSearch"
        :data="searchList"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="序列号" prop="fequipmentbarcode" />
        <el-table-column align="center" label="固定资产码" prop="fmacno" />
        <el-table-column align="center" label="储物柜编号" prop="feuipmentid" />
        <el-table-column align="center" label="储物柜名称" prop="fequipmenttag" />
        <el-table-column
          align="center"
          label="选择"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
             :style="{background:buttonColor.confirm,color:buttonColor.color}"
              round
              size="small"
              class="button-margin"
              @click="searchData(scope.row)"
            >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalSearch > 0"
        :total="totalSearch"
        :page.sync="listQuerySearch.page"
        :limit.sync="listQuerySearch.limit"
        style="padding:14px 10px !important"
        @pagination="getSearchList"
      />
    </el-dialog>
</template>

<script>
import Pagination from '@/components/Pagination'
import { listtsCabinet } from '@/api/tsCabinet'
import {buttonColor,titleColor} from '@/filters/index'
export default {
  name: 'CabinetDialog',
  components: { Pagination },
  props:{
    cabinetVisible: {
      required: true,
      type: Boolean
    },
    tableColor: {
      required: true,
      type: Object
    },
    fsiteNo: {
      required: true,
    },
    fpointNo: { },
    checkUnBind: {
      type: Number,
    },
  },
  data(){
    return{
      titleColor,
      buttonColor,
      selectList:[],
      searchList: null,
      listLoadingSearch: true,
      totalSearch: 0,
      listQuerySearch: {
        page: 1,
        limit: 20,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        sort: 'create_time',
        order: 'desc'
      },
    }
  },
  created(){
     this.getSearchList()
  },
  watch: {
    fsiteNo: function() {
      this.getSearchList()
    },
    fpointNo: function() {
      this.getSearchList()
    },
  },
  methods:{
     // 储物柜搜索列表
    getSearchList() {
      if(this.fsiteNo){
         this.listLoadingSearch = true
        const temp = {
          checkUnBind:this.checkUnBind,
          fsiteNo:this.fsiteNo,
          fpointNo:this.fpointNo,
          fpointFlag:0,
          page:this.listQuerySearch.page,
          limit:this.listQuerySearch.limit,
          sort: 'create_time',
          order: 'desc',
          feuipmentid:this.listQuerySearch.feuipmentid,
          fequipmenttag:this.listQuerySearch.fequipmenttag,
        }

        listtsCabinet(temp)
        .then(response => {
          this.searchList = response.data.data.list
          this.totalSearch = response.data.data.total
            this.listLoadingSearch = false
        })
        .catch(() => {
          this.searchList = []
          this.totalSearch = 0
            this.listLoadingSearch = false
        })
      }else{
        this.searchList = []
        this.totalSearch = 0
        this.listLoadingSearch = false
      }
    },

    // 查找
    searchFilter() {
      this.listQuerySearch.page = 1
      this.getSearchList()
    },

    // 确定
    searchData(row) {
     this.$emit('update:cabinetVisible', false)
      this.$emit('cabinetDialog', { info: row })
    },

     // 弹窗点击关闭前的回调
    handleClose(){
      this.$emit('update:cabinetVisible', false)
    }

  },
}
</script>
